<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
		<title>合同签字</title>
		<link rel="stylesheet" type="text/css" href="__CSS__/index.css" />
		<script src="__JS__/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="tourist1" style="min-height: 100vh;background-color: #F7F8F9;width: 100%;display: flex;flex-direction: column;">
			<div class="family-sign-pact-div">
				<div class="left">
					家庭编号
				</div>
				<div style="font-size: 1.1875rem;font-weight: 700;">
					01
				</div>
			</div>
			<div id="" class="sign-hand-title">
				代表签字，请在下方的灰色区域手写签字
			</div>
			<canvas id="canvasbox" class="canvas-sign"
				@mouseup="mouseup"
				@mouseleave="mouseleave"
				@mousemove="mousemove"
				@mousedown="mousedown"
			></canvas>
			<!-- <button id="savebtn">保存</button> -->
			<button id="clearbtn" class="clearbtn" @click="clear">重签</button>
			<div class="tab-id-1-title">
				签约代表
			</div>
			<div class="form">
				<div class="form-div">
					<div class="form-label">
						王小勇
					</div>
				</div>
			</div>
			<div class="tab-id-1-title" style="margin-top: 1.25rem ;">
				代表电话(用于接收电子合同短信)
			</div>
			<div class="form">
				<div class="form-div">
					<input class="form-input" type="number" v-model="mobile" placeholder="请输入真实手机号码" />
				</div>
			</div>
			<button class="submit-btn-sign">提交</button>
			<button class="submit-btn-sign1">返回</button>
		</div>
	</body>
</html>
<script>
	new Vue({
		el: "#tourist1",
		data() {
			return {
				mobile: "",
				canvasbox:{},
				ctx:{},
				iscanvas:false,
				offsetX:"",
				offsetY:'',
				img:new Image()
			}
		},
		created() {
			this.$nextTick(()=>{
				this.canvasbox = document.getElementById("canvasbox");
				this.ctx = canvasbox.getContext("2d");
				this.iscanvas = false;
				this.offsetX = '';
				this.offsetY = '';
				// var savebtn = document.getElementById("savebtn");
				// savebtn.addEventListener("click", function() {
				// 	console.log(111)
				// 	downLoad(saveAsPNG(canvasbox));
				// })
				
				function downLoad(url) {
					let image = new Image()
					
				}
				// 保存成png格式的图片
				function saveAsPNG(canvas) {
					return canvas.toDataURL("__IMG__/png");
				}
				// 保存成jpg格式的图片
				function saveAsJPG(canvas) {
					return canvas.toDataURL("__IMG__/jpeg");
				}
			})
		},
		
		methods: {
			clear(){
				this.ctx.clearRect(0, 0, this.canvasbox.width, this.canvasbox.height)
			},
			mouseup(e){
				this.iscanvas = false;
			},
			mousemove(e){
				console.log(e)
				if (this.iscanvas) {
					this.ctx.beginPath();
					this.ctx.moveTo(this.offsetX, this.offsetY)
					this.ctx.lineTo(e.offsetX, e.offsetY)
					this.ctx.lineWidth = 2;
					this.ctx.stroke()
					this.offsetX = e.offsetX;
					this.offsetY = e.offsetY;
				}
			},
			mouseleave(e){
				this.iscanvas = false;
			},
			mousedown(e){
				console.log(e)
				this.iscanvas = true;
				this.offsetX = e.offsetX;
				this.offsetY = e.offsetY;
			},
			postForm() {

			}
		}
	})
</script>
